import React, { FormEvent } from "react";
import axios from "axios";

export const LoginScreen = () => {
  const login = (param: { username: string; password: string }) => {
    axios("http://localhost:9000/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      data: JSON.stringify(param),
    }).then((response) => {});
  };
  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault(); //阻止表单提交
    const username = (event.currentTarget.elements[0] as HTMLInputElement)
      .value;
    const password = (event.currentTarget.elements[1] as HTMLInputElement)
      .value;
    login({ username, password });
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor={"username"}>用户名</label>
        <input type={"text"} id={"username"} value={"xiaoxiaopang"} />
      </div>
      <div>
        <label htmlFor={"password"}>用户名</label>
        <input type={"password"} id={"password"} value={"123456"} />
      </div>
      <button type={"submit"}>登录</button>
    </form>
  );
};
